<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/index_css.css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

    <script>
        function showMenu() {
            var menu = $("#menu")[0];//var menu=document.getElementById("menu");
            var bg = $("#bg")[0];//var bg=document.getElementById("bg");
            var display = menu.style.display;
            if (display == "") {
                menu.style.display = "block";
                bg.style.zIndex=15;
                bg.style.display = "block";
            } else {
                menu.style.display = "";
                bg.style.zIndex=5;
                bg.style.display = "";
            }
            reset();
        }

        function reset() {
            var arr = new Array('a', 'b', 'c', 'd', 'e');
            var values = new Array('全部主题', '山水景观', '温泉度假', '酷夏漂流', '亲子庄园');
            for (var i = 0; i < arr.length; i++) {
                var obj = $("#" + arr[i])[0];//var obj=document.getElementById(arr[i]);
                obj.innerHTML = "";
                var spanObj = document.createElement('span');
                spanObj.setAttribute("class", "menu_item");
                spanObj.innerHTML = values[i];
                obj.appendChild(spanObj);
            }
        }
        function isSelect(id, v) {
            reset();
            var obj = $("#" + id)[0]//var obj=document.getElementById(id);
            obj.innerHTML = "";
            var spanObj = document.createElement('span');
            spanObj.setAttribute("class", "menu_item_new");
            spanObj.innerHTML = v;
            obj.appendChild(spanObj);
            var img = document.createElement('img');
            img.setAttribute("class", "menu_img");
            img.src = "images/arr_shop_click.png";
            obj.appendChild(img);
            var tex = $("#SearchInput")[0];//var tex=document.getElementById("SearchInput");
            tex.value = v;

        }

        function isSelectSecond(id) {
            var arr = new Array('aa', 'bb', 'cc', 'dd', 'ee');
            for (var i = 0; i < arr.length; i++) {
                /*var temp = document.getElementById(arr[i]);
                 temp.style.border = "1px solid #F0F0F0";
                 var word_obj = temp.childNodes.item(0);
                 var img_obj = temp.childNodes.item(1);

                 word_obj.setAttribute("class", "menu_item");
                 if (img_obj) {

                 temp.removeChild(img_obj);
                 }*/
                var temp=$("#"+arr[i]);
                temp.css("border","1px solid #F0F0F0");
                var word_obj=temp.children("span");
                word_obj.css("color","#000000");
                if($("#"+arr[i]+":last-child")!=null) {
                    temp.children("img").remove();
                }
            }

            /*
             var obj = document.getElementById(id);
             obj.style.border = "1px solid salmon";
             var word = obj.childNodes.item(0);
             word.setAttribute("class", "menu_item_new");
             var img = document.createElement('img');
             img.setAttribute("class", "menu_img");
             img.src = "images/arr_shop_click.png";
             obj.appendChild(img);
             */
            var obj=$("#"+id);
            obj.css("border","1px solid salmon");
            var word_obj=obj.children("span");
            word_obj.css("color","#76EE00");
            obj.append("<img src='images/arr_shop_click.png' class='menu_img'/>");
        }

        function reset1() {
            var menu = document.getElementById("menu");
            menu.style.display = "";
            var menu = document.getElementById("second_menu");
            var bg = document.getElementById("bg");
            var cbpfwslider = document.getElementById("cbp-fwslider");
            var tour_bar = document.getElementById("tour_bar");
            var pad = document.getElementById("pad");
            var content_title = document.getElementById("content_title");
            menu.style.display = "";
            bg.style.display = "";
            cbpfwslider.style.zIndex = 0;
            tour_bar.style.zIndex = 0;
            pad.style.zIndex = 0;
            content_title.style.zIndex = 0;
        }
    </script>
    <title></title>
</head>
<body>
<div>
    <div id="top1">
        <div id="top_back"><a href="exercise2.html"><img src="images/top_back.png"></a></div>
        <div id="infinitySearch"><input type="text" id="SearchInput" class="SearchInput"
                                        placeholder="输入目的地/景区/酒店自由行..."/></div>
        <div id="top_category"><img src="images/top_category.png" onclick="showMenu()"></div>
    </div>

    <div id="menu" onclick="">
        <div id="a" class="menu" onclick="isSelect('a','全部主题')">
            <span class="menu_item">全部主题</span>
        </div>
        <div id="b" class="menu" onclick="isSelect('b','山水景观')">
            <span class="menu_item">山水景观</span>
        </div>
        <div id="c" class="menu" onclick="isSelect('c','温泉度假')">
            <span class="menu_item">温泉度假</span>
        </div>
        <div id="d" class="menu" onclick="isSelect('d','酷夏漂流')">
            <span class="menu_item">酷夏漂流</span>
        </div>
        <div id="e" class="menu" onclick="isSelect('e','亲子庄园')">
            <span class="menu_item">亲子庄园</span>
        </div>
    </div>

    <div class="banner-box">
        <div class="bd">
            <ul>
                <li style="background: #F3E5D8;">
                    <div class="m-width">
                        <a href="javascript:void(0);">
                            <img src="images/ban_1.jpg" class="banner-img"/></a>
                    </div>
                </li>
                <li style="background: #B01415">
                    <div class="m-width">
                        <a href="javascript:void(0);">
                            <img src="images/ban_2.jpg" class="banner-img"/></a>
                    </div>
                </li>
                <li style="background: #C49803;">
                    <div class="m-width">
                        <a href="javascript:void(0);">
                            <img src="images/ban_3.jpg" class="banner-img"/></a>
                    </div>
                </li>
                <li style="background: #FDFDF5">
                    <div class="m-width">
                        <a href="javascript:void(0);">
                            <img src="images/ban_4.jpg" class="banner-img"/></a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="banner-btn">
            <a class="prev" href="javascript:void(0);"></a><a class="next" href="javascript:void(0);"></a>
            <div class="hd">
                <ul>
                </ul>
            </div>
        </div>
    </div>

    <div id="tour_bar" class="tour_bar">
        <nav id="tour-nav" class="tour-nav">
            <a class="j-nav-item nav-item nav-right-sep">
                <span style="font-size: 1rem"><img src="images/jd_arr1.png"/>热门景点</span>
            </a>
            <a class="j-nav-item nav-item">
                <span style="font-size: 1rem"><img src="images/jd_arr2.png">我身边</span>
            </a>

        </nav>
    </div>
</div>
<div id="pad" id="pad"></div>
<div id="content">
    <div id="content_title">
        <div class="title-item">
            <span style="font-size: 1rem">位置区域<img src="images/channelBg.png"/></span>
        </div>
        <div class="title-item-mid">
            <span style="font-size: 1rem">达人推荐<img src="images/channelBg.png"/></span>
        </div>
        <div class="title-item">
            <span style="font-size: 1rem">全部主题<img src="images/channelBg.png"/></span>
        </div>
    </div>
    <div id="second_menu">
        <div id="aa" class="menu" onclick="isSelectSecond('aa')"></div>
        <div id="bb" class="menu" onclick="isSelectSecond('bb')"></div>
        <div id="cc" class="menu" onclick="isSelectSecond('cc')"></div>
        <div id="dd" class="menu" onclick="isSelectSecond('dd')"></div>
        <div id="ee" class="menu" onclick="isSelectSecond('ee')"></div>
    </div>

    <div class="content_part">

        <div class="content_left_pic">
            <img class="jd_pic" src="images/jd_pic.jpg"/>
        </div>
        <div class="content_left">
            <p style="margin-bottom: 1rem" class="t1">洞头望海楼景区</p>
            <span class="fan">返</span>
            <span class="juan">劵</span>

            <p style="margin-top: 1rem" class="t2">风景名胜</p>

            <p style="margin-top: 1rem" class="t3">已售2008</p>

        </div>
        <div class="content_right">
            <span class="nowPrice">￥100</span><span style="color:#a0a0a0;">起<br> </span>
            <span class="lastPrice">￥240</span>
        </div>
    </div>
    <div class="content_part">

        <div class="content_left_pic">
            <img class="jd_pic" src="images/jd_pic.jpg"/>
        </div>
        <div class="content_left">
            <p style="margin-bottom: 1rem" class="t1">洞头望海楼景区</p>
            <span class="fan">返</span>
            <span class="juan">劵</span>

            <p style="margin-top: 1rem" class="t2">风景名胜</p>

            <p style="margin-top: 1rem" class="t3">已售2008</p>

        </div>
        <div class="content_right">
            <span class="nowPrice">￥100</span><span style="color:#a0a0a0;">起<br> </span>
            <span class="lastPrice">￥240</span>
        </div>
    </div>
    <div class="content_part">

        <div class="content_left_pic">
            <img class="jd_pic" src="images/jd_pic.jpg"/>
        </div>
        <div class="content_left">
            <p style="margin-bottom: 1rem" class="t1">洞头望海楼景区</p>
            <span class="fan">返</span>
            <span class="juan">劵</span>

            <p style="margin-top: 1rem" class="t2">风景名胜</p>

            <p style="margin-top: 1rem" class="t3">已售2008</p>

        </div>
        <div class="content_right">
            <span class="nowPrice">￥100</span><span style="color:#a0a0a0;">起<br> </span>
            <span class="lastPrice">￥240</span>
        </div>
    </div>
    <div id="chick_more">
        点击查看更多...
    </div>
</div>
<footer>
    <div class="footer_menu">
        <div><img src="images/bottom_home_click.png" style="width: 2rem;height: 2rem"></div>
        <p style="font-size: 0.8rem">首页</p>
    </div>
    <div class="footer_menu">
        <div><img src="images/bottom_find.png" style="width: 2rem;height: 2rem"></div>
        <p style="font-size: 0.8rem">发现</p>
    </div>
    <div class="footer_menu">
        <div><img src="images/bottom_shop.png" style="width: 2rem;height: 2rem"></div>
        <p style="font-size: 0.8rem">购物车</p>
    </div>
    <div class="footer_menu">
        <div><img src="images/bottom_mine.png" style="width: 2rem;height: 2rem"></div>
        <p style="font-size: 0.8rem">我的</p>
    </div>

</footer>
<div id="bg" onclick="reset1()"></div>
<script>
    $(document).ready(
            function () {
                var arr = new Array('#aa', '#bb', '#cc', '#dd', '#ee');
                var snum = 0;
                var anum = 0;
                $(".title-item").click(function () {
                    var index = $(".title-item").index(this);
                    var second_menu = $("#second_menu");
                    /*alert(second_menu.css("display"));*/
                    if (second_menu.css("display") == "none") {
                        second_menu.css("display", "block");
                    } else {
                        if (snum == 0) {
                            second_menu.css("display", "none");
                            $("#bg").css("display","none");
                        }
                    }
                    if (index == 0) {
                        if (snum == 1) {
                            snum = 0;
                            second_menu.css("display", "none");
                            $("#bg").css("display","none");
                        } else {
                            var values = new Array('温州', '杭州', '丽水', '宁波', '绍兴');
                            for (var i = 0; i < arr.length; i++) {
                                var temp = $(arr[i]).empty();
                                temp.css("border", "1px solid #F0F0F0");
                                temp.append("<span class='menu_item'>" + values[i] + "</span>");

                            }
                            var o = second_menu.offset();
                            /*alert(second_menu.outerHeight(true));*/
                            $("#bg").css("top", o.top+second_menu.outerHeight(true)+"px");
                            $("#bg").css("display","block");
                            snum = 1;
                        }
                    } else {
                        if (snum == 3) {
                            snum = 0;
                            second_menu.css("display", "none");
                            $("#bg").css("display","none");
                        } else {
                            var values = new Array('主题1', '主题2', '主题3', '主题4', '主题5');
                            for (var i = 0; i < arr.length; i++) {
                                var temp = $(arr[i]).empty();
                                temp.css("border", "1px solid #F0F0F0");
                                temp.append("<span class='menu_item'>" + values[i] + "</span>");
                            }
                            var o = second_menu.offset();
                            /*alert(second_menu.outerHeight(true));*/
                            $("#bg").css("top", o.top+second_menu.outerHeight(true)+"px");
                            $("#bg").css("display","block");
                            snum = 3;
                        }
                    }
                });

                $(".title-item-mid").click(function () {
                    var second_menu = $("#second_menu");
                    /*alert(second_menu.css("display"));*/
                    if (second_menu.css("display") == "none") {
                        second_menu.css("display", "block");
                    } else {
                        if (snum == 0) {
                            second_menu.css("display", "none");
                        }
                    }
                    if (snum == 2) {
                        snum = 0;
                        second_menu.css("display", "none");
                        $("#bg").css("display","none");
                    } else {
                        var values = new Array('雁荡山', '玉苍山', '碗窑', '炎亭', '绍兴');
                        for (var i = 0; i < arr.length; i++) {
                            var temp = $(arr[i]).empty();
                            temp.css("border", "1px solid #F0F0F0");
                            temp.append("<span class='menu_item'>" + values[i] + "</span>");
                        }
                        var o = second_menu.offset();
                        /*alert(second_menu.outerHeight(true));*/
                        $("#bg").css("top", o.top+second_menu.outerHeight(true)+"px");
                        $("#bg").css("display","block");
                        snum = 2;
                    }
                });
            }
    );

</script>
<script type="text/javascript">
    $(document).ready(function () {

        $(".prev,.next").hover(function () {
            $(this).stop(true, false).fadeTo("show", 0.9);
        }, function () {
            $(this).stop(true, false).fadeTo("show", 0.4);
        });

        $(".banner-box").slide({
            titCell: ".hd ul",
            mainCell: ".bd ul",
            effect: "fold",
            interTime: 3500,
            delayTime: 500,
            autoPlay: true,
            autoPage: true,
            trigger: "click"
        });

    });
</script>
</body>
</html>